import React from 'react';
import _ from 'underscore';
import cx from 'classnames';
import ReactPager from 'react-pagers';

import dispatcher from 'lib/dispatcher';
import Loading from 'lib/components/Loading.jsx';

import Single from './Single.jsx';
import Interactive from './Interactive.jsx';
import Multi from './Multi.jsx';

export default class MainView extends Loading {
  constructor(props, context) {
    super(props, context);

    this.state = {
      currentPage: 0,
      pageSize: 10
    };
  } // constructor

  handlePageActiveChange(pageNumber) {
    this.setState({
      currentPage: pageNumber - 1
    });
  } // handlePageActiveChange

  clickHandler(callback) {
    dispatcher.dispatch({
      $type: 'jump_to_subpage',
      callback
    })
  } // clickHandler

  renderBody(data) {
    let pageCount = Math.ceil(data.rows.length * 1.0 / this.state.pageSize);
    if (pageCount <= this.state.currentPage) {
      this.state.currentPage = 0;
    }

    let indicatorCount = this.props.eventIndicators.length;
    let dimensionCount = _.size(this.props.dimensionDic);
    let table = null;

    let itemBeginIndex = this.state.pageSize * this.state.currentPage;
    let itemEndIndex = itemBeginIndex + this.state.pageSize;
    let filteredData = _.filter(data.rows, (p, i) => i >= itemBeginIndex && i < itemEndIndex);

    if (indicatorCount === 1) {
      if (dimensionCount === 0) {
        table = (<Single cols={ this.props.cols } data={ filteredData } sum={ data.sum } onClick={ this.clickHandler.bind(this) } />);
      } else {
        table = (
          <Interactive
            cols={ this.props.cols }
            data={ filteredData }
            sum={ data.sum }
            selectedColumns={ this.props.selectedColumns }
            onClick={ this.clickHandler.bind(this) }
            showSelectedColumns={ this.props.showSelectedColumns } />
        );
      }
    } else {
      if (dimensionCount === 0) {
        table = (<Single cols={ this.props.cols } data={ filteredData } sum={ data.sum } onClick={ this.clickHandler.bind(this) } />);
      } else {
        if (data.rows[0].value.length === 1) {
          table = (<Single cols={ this.props.cols } data={ filteredData } sum={ data.sum } onClick={ this.clickHandler.bind(this) } />);
        } else {
          table = (<Multi cols={ this.props.cols } data={ filteredData } sum={ data.sum } onClick={ this.clickHandler.bind(this) } />);
        }
      }
    }

    return (
      <div>
        { table }
        {
          pageCount <= 1 ? null : (
            <ReactPager
              active={ this.state.currentPage + 1 }
              total={ pageCount }
              onChange={ this.handlePageActiveChange.bind(this) }
              className={{
                container: 'text-right'
              }} />
          )
        }
      </div>
    );
  } // render
}

MainView.defaultProps = _.extend({}, Loading.defaultProps, {
  cols: [],
  eventIndicators: [],
  dimensionDic: {},
  selectedColumns: []
});
